<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <!--
            基于jquery 的滚屏插件

    -->
    <script src="js/jquery.fullPage.min.js"></script>

    <style>
        body {
            margin: 0;
            padding: 0;
        }

        /*
            第一屏
        */
        .first {
            background-color: #0da5d6;
            padding-top: 30px;
        }

        .first .logo {
            background: url("img/360_images/logo.png");
            width: 251px;
            height: 186px;
            margin: 0 auto;
        }

        .first .text {
            text-align: center;
            margin: 30px 10px;
        }

        .first .text img {
            margin: 0 34px;
            opacity: 0;

        }

        .first .info {
            background: url("img/360_images/info_1.png");
            width: 772px;
            height: 49px;
            margin: 100px auto;
        }

        /*  第二屏*/
        .seconds {
            background-color: #2AB561;
            overflow: hidden;
        }

        /*
          因为jquery fullpage 会在seconds 生成一个div 元素
        */
        .seconds > div {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .seconds .shield {
            width: 500px;
            height: 400px;
        }

        /*去掉图片之间的间隔*/
        .seconds .shield img {
            float: left;
        }

        .seconds .info {
            background: url("img/360_images/info_2.png");
            width: 635px;
            height: 309px;
        }

        /*获取到ｉｍｇ　元素，然后各种旋转移动*/
        .seconds .shield img:nth-child(1) {
            transform: translate(300px, 400px) rotate(50deg);
        }

        .seconds .shield img:nth-child(5) {
            transform: translate(300px, 100px) rotate(60deg);
        }

        .seconds .shield img:nth-child(9) {
            transform: translate(-300px, -300px) rotate(60deg);
        }

        /*  第三屏*/
        .thrid {
            background-color: #DE8910;
            position: relative;
            overflow: hidden;
        }

        .thrid > div {
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

        .thrid .info {
            background: url("img/360_images/info_3.png");
            width: 631px;
            height: 278px;
        }

        .thrid .circle {
            background: url("img/360_images/circle.png");
            width: 453px;
            height: 449px;
        }

        .thrid .rocket {
            background: url("img/360_images/rocket.png");
            width: 203px;
            height: 204px;
            position: absolute;
            left: 0;
            bottom: 0;
            transform: translate(100px, 230px);
        }

        /*  第四屏*/
        .fourth {
            background-color: #0EA9B1;
        }

        .fourth > div {
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

        .fourth .search {
            width: 530px;
            height: 300px;
            position: relative;
        }

        /*
           搜索工具栏
        */
        .fourth .toolbar {
            background: url("img/360_images/search.png");
            width: 529px;
            height: 66px;
            transform: translateX(-120%);
        }

        .fourth .keys {
            background: url("img/360_images/key.png");
            /* width: 99px;*/
            width: 0;
            height: 22px;
            position: absolute;
            left: 20px;
            top: 23px;
        }

        .fourth .result {
            background: url("img/360_images/result.png");
            width: 529px;
            height: 372px;
            transform: translateY(-100%);
        }

        .fourth .wrap {
            margin-top: -12px;
            overflow: hidden;
        }

        .fourth .info {
            background: url("img/360_images/info_4.png");
            width: 612px;
            height: 299px;
        }

        /*  第五屏*/
        .fifth {
            background-color: #0DA5D6;
            overflow: hidden;
        }

        .fifth > div {
            display: flex;

            /*调整主轴的方向。*/
            flex-direction: column;
            /* 调整的是侧轴*/
            align-items: center;
        }

        .fifth .info {
            background: url("img/360_images/info_5.png");
            width: 1077px;
            height: 134px;
        }

        .fifth .browser {
            flex: 1;
            width: 1004px;
            position: relative;
        }

        .fifth .browser .bg {
            background: url("img/360_images/toolbar.png");
            height: 79px;
            width: 1004px;
        }

        .fifth .line {
            position: absolute;
            background: #fff;
        }

        .fifth .leftline {
            left: 0;
            top: 0;
            width: 1px;
            height: 100%;
            transform: translateY(-130%);
        }

        .fifth .topline {
            left: 0;
            top: 0;
            width: 100%;
            height: 1px;
            transform: translateX(130%);
        }

        .fifth .rightline {
            right: 0;
            top: 0;
            width: 1px;
            height: 100%;
            transform: translateY(100%);
        }

        .fifth .bottomline {
            bottom: 0;
            left: 0;
            height: 1px;
            width: 100%;
            transform: translateX(-130%);
        }

        .fifth .toolbarline {
            width: 0;
            opacity: 1;
            height: 30px;
            position: absolute;
            left: 109px;
            top: 30px;
            border: 1px solid #fff;
            border-radius: 2px;
        }

        .fifth .extra {
            background: url("img/360_images/extra.png");
            width: 394px;
            height: 29px;
            position: absolute;
            bottom: 0;
            right: 0;
        }

        /*第一屏的动画*/
        .first.current .text img {
            margin: 0 4px;
            opacity: 1;
            /*
                 浏览器加载
            */
            transition: all 1s linear;
        }

        /*
            　第二屏动画
        */
        .seconds.current .shield img {
            transition: all 1s linear;
            transform: translate(0, 0) rotate(0deg);
        }

        /*第三屏动画*/
        .thrid.current .rocket {
            transform: translate(900px, -300px);
            transition: all 1s linear;
        }

        /*第四屏幕动画*/
        .fourth.current .toolbar {
            transform: translate(0);
            transition: all 1s linear;
        }

        .fourth.current .keys {
            animation: typing 2s steps(5) 1.2s 1 forwards;
        }

        .fourth.current .result {
            transform: translateY(0);
            transition: all 1s linear 3.5s;
        }

        /*定义动画*/

        @keyframes typing {
            0% {

            }
            100% {
                width: 99px;
            }
        }

        /*
              第五屏幕的动画
        */
        .fifth.current .line {
            transform: translate(0);
            transition: all 1s linear;
        }

        .fifth.current .toolbarline {
            width: 876px;
            opacity: 0.3;
            transition: all 1s linear 1.3s;

        }

        /*
                1:js 去操作样式就可以执行动画。
            滚轮滚动到这一屏幕的时候我们要去执行动画。

                当滚轮滚动到这一屏幕的时候我们可以给这一屏添加一个class，我们就可以
             执行动画
                1：当鼠标滚动到某一屏幕的时候我要触发一个事件，当滚轮滚动到某一
              屏，我们希望能够执行一个事件。
        */


    </style>

</head>
<body>
<!--
        onmousewheel 滚轮事件。
-->
<div id="fullpage">
    <!--第一屏幕-->
    <div class="first section active">
        <!-- logo 位置-->
        <div class="logo"></div>
        <!--文本-->
        <div class="text">
            <img src="img/360_images/text_1.png">
            <img src="img/360_images/text_2.png">
            <img src="img/360_images/text_3.png">
            <img src="img/360_images/text_4.png">
            <img src="img/360_images/text_5.png">
            <img src="img/360_images/text_6.png">
            <img src="img/360_images/text_7.png">
            <img src="img/360_images/text_8.png">
        </div>
        <!--信息区域-->
        <div class="info"></div>
    </div>
    <!--第二屏-->
    <div class="seconds section">
        <div class="shield">
            <img src="img/360_images/shield_1.png">
            <img src="img/360_images/shield_2.png">
            <img src="img/360_images/shield_3.png">
            <img src="img/360_images/shield_4.png">
            <img src="img/360_images/shield_5.png">
            <img src="img/360_images/shield_6.png">
            <img src="img/360_images/shield_7.png">
            <img src="img/360_images/shield_8.png">
            <img src="img/360_images/shield_9.png">
        </div>
        <div class="info"></div>
    </div>
    <!--第三屏幕-->
    <div class="thrid section">
        <div class="info"></div>
        <div class="circle"></div>
        <div class="rocket"></div>
    </div>
    <!--第四屏幕-->
    <div class="fourth section">
        <div class="search">
            <div class="toolbar"></div>
            <div class="keys"></div>
            <div class="wrap">
                <div class="result"></div>
            </div>
        </div>
        <div class="info"></div>
    </div>
    <!--第五屏幕-->
    <div class="fifth section">
        <div class="info"></div>
        <div class="browser">
            <div class="toolbarline"></div>
            <div class="bg"></div>
            <div class="topline line"></div>
            <div class="bottomline line"></div>
            <div class="leftline line"></div>
            <div class="rightline line"></div>
            <div class="extra"></div>

        </div>
    </div>
</div>
<script>
    /*
     * fullpage  这个方法是jquery.fullPage.min.js 在插件里面的方法。
     * */
    $(function () {

        /*
         * 回调函数就是将一个函数作为参数传递，作为参数传递的函数就是回调函数。
         *
         * $("#").animate({"":"","":""})
         *
         * onmousewhell 鼠标滚轮
         * */

        $("#fullpage").fullpage({
            /*
             *    第二个参数：
             *            index 是序号，从1开始计算
             *
             *滚动到每一屏后的回调函数
             *    滚动到第一个屏，索引值就是1
             *    第二屏就是2
             * */
            afterLoad: function (anchorLink, index) {
                //假设我滚动到第一屏我想得到第一个section
                //0.05 秒之后执行这段代码。
                //延迟0.05 把这个class 加上去才有动画。
                $(".section").removeClass("current");
                //等0.05 秒把class 加上去
                window.setTimeout(function () {
                    $(".section").eq(index - 1).addClass("current");
                }, 50);
            }
        });
    })
</script>
</body>
</html>